<script setup>
import { ref, defineExpose, watch, defineProps } from 'vue'
import { ElForm, ElFormItem, ElInput, ElColorPicker, ElSelect, ElOption,ElTooltip } from 'element-plus'
const props = defineProps({
    options: {// 配置属性
        type: Object,
        default: () => ({})
    }
})
const options = ref(props.options)
watch(() => props.options, (newValue, oldValue) => {
    if (newValue !== oldValue) {
        options.value = props.options
    }
})

const optionsAlign = [
    {
        value: 'left',
        label: '左对齐'
    },
    {
        value: 'center',
        label: '居中对齐'
    },
    {
        value: 'right',
        label: '右对齐'
    }
]
defineExpose({
    options: options
})
</script>

<template>
    <div class="_container_md">
        <el-form label-width="auto" style="max-width: 600px">
            <el-form-item label="文字内容" label-position="left">
                <el-input v-model="options.text" type="textarea" />
            </el-form-item>
            <el-form-item label="字体加粗" label-position="left">
                <el-input v-model="options.fontWeight" />
            </el-form-item>
            <el-form-item label="字体大小" label-position="left">
                <el-input v-model="options.fontSize" />
            </el-form-item>
            <el-form-item label="字体行高" label-position="left">
                <el-input v-model="options.lineHeight" />
            </el-form-item>
            <el-form-item label="文字颜色" label-position="left">
                <el-color-picker v-model="options.textColor" show-alpha />
            </el-form-item>
            <el-form-item label="文字位置" label-position="left">
                <el-select v-model="options.textAlign" placeholder="请选择位置" style="width: 240px">
                    <el-option v-for="item in optionsAlign" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </el-form-item>
            <el-form-item label="内边填充" label-position="left">
                <el-input v-model="options.padding" />
            </el-form-item>
            <el-form-item label="文字背景色" label-position="left">
                <el-color-picker v-model="options.backgroundColor" show-alpha />
            </el-form-item>
            <el-form-item label="文字背景图" label-position="left">
                <el-input v-model="options.backgroundImage" />
            </el-form-item>
            <el-form-item label="文字渐变" label-position="left">
                <el-input v-model="options.backgroundGradient" />
            </el-form-item>
        </el-form>
    </div>
</template>

<style scoped lang="scss"></style>